{extend name="public:base"}
{block name="body"}
<body class="pear-container">
	<!--统计-->
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs4 layui-col-md4">
            <div class="layui-card top-panel">
                <div class="layui-card-header">短域名数</div>
                <div class="layui-card-body" style="text-align:center;">
                    {$data['domain']}
                </div>
            </div>
        </div>
        <div class="layui-col-xs4 layui-col-md4">
            <div class="layui-card top-panel">
                <div class="layui-card-header">炮灰域名数</div>
                <div class="layui-card-body" style="text-align:center;">
                    {$data['host']}
                </div>
            </div>
        </div>
        <div class="layui-col-xs4 layui-col-md4">
            <div class="layui-card top-panel">
                <div class="layui-card-header"> 用户数</div>
                <div class="layui-card-body" style="text-align:center;">
                    {$data['user']}
                </div>
            </div>
        </div>
    </div>
    <!--形势图1-->
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs12 layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div style="display:flex;align-items: center;">
                        <div style="flex:1">域名访问量统计</div>
                        <div style="flex:1">
                            <form class="layui-form" action="">
                                <div class="layui-form-item layui-inline">
                                    <div class="layui-input-inline">
                                        <select name="domain">
                                            <option value="">全部域名</option>
                                            {volist name="domain" id="vo"} 
                                            <option value="{$vo.id}">{$vo.host}</option>
                                            {/volist}
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-inline" id="ID-laydate-range">
                                    <div class="layui-input-inline">
                                        <input type="text" name="startDate" autocomplete="off" id="ID-laydate-start-date" class="layui-input" placeholder="开始日期" readonly>
                                    </div>
                                    <div class="layui-form-mid">-</div>
                                    <div class="layui-input-inline">
                                        <input type="text" name="endDate" autocomplete="off" id="ID-laydate-end-date" class="layui-input" placeholder="结束日期" readonly>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-inline">
                                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
                                        <i class="layui-icon layui-icon-search"></i>
                                        查询
                                    </button>
                                    <button class="pear-btn pear-btn-md pear-btn-danger" lay-submit lay-filter="table-del">
                                        <i class="layui-icon layui-icon-delete"></i>
                                        删除
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-records1" style="background-color:#ffffff;min-height:440px;padding: 10px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>	
    <!--形势图2-->
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs12 layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">地区访问统计</div>
                <div class="layui-card-body"  style="min-height:460px;">
                    <table id="table-list" lay-filter="table-list"></table>
                </div>
            </div>
        </div>
    </div>
</body>
{/block}
{block name="custome"}

{/block}
{block name="script"}

<script>
    layui.use(['table',  'jquery', 'common', 'form','echarts','laydate'], function () {
        let $ = layui.jquery;
        let common = layui.common;
        let count = layui.count;
        let echarts = layui.echarts;
        let laydate = layui.laydate;
        let form = layui.form;
        // 日期范围 - 左右面板联动选择模式
        laydate.render({
            elem: '#ID-laydate-range',
            range: ['#ID-laydate-start-date', '#ID-laydate-end-date'],
            rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
        });
        let table = layui.table;
        let cols = [
            [
            {
                title: '省份',
                field: 'region1',
                align: 'center',
            },
            {
                title: 'PV',
                field: 'pv1',
                align: 'center',
            },
            {
                title: 'UV',
                field: 'uv1',
                align: 'center',
            },
            {
                title: '省份',
                field: 'region2',
                align: 'center',
            },
            {
                title: 'PV',
                field: 'pv2',
                align: 'center',
            },
            {
                title: 'UV',
                field: 'uv2',
                align: 'center',
            }
            ]
        ]

        table.render({
            elem: '#table-list',
            url: '{:url("region")}',
            parseData: function(res){ 
            return {
            "code": res.code, //解析接口状态
            "msg": res.message, //解析提示文本
            "count": res.total, //解析数据长度
            "data": res.data //解析数据列表
            }},
            page: false,
            cols: cols,
            skin: 'line',
            toolbar: [],
            defaultToolbar: []
        });
        let cols1 = [
            [
            {
                title: '时间',
                field: 'time1',
                align: 'center',
            },
            {
                title: 'PV',
                field: 'pv1',
                align: 'center',
            },
            {
                title: 'UV',
                field: 'uv1',
                align: 'center',
            },
            {
                title: '时间',
                field: 'time2',
                align: 'center',
            },
            {
                title: 'PV',
                field: 'pv2',
                align: 'center',
            },
            {
                title: 'UV',
                field: 'uv2',
                align: 'center',
            }
            ]
        ]

        table.render({
            elem: '#table-list1',
            url: '{:url("index")}',
            parseData: function(res){ 
            return {
            "code": res.code, //解析接口状态
            "msg": res.message, //解析提示文本
            "count": res.data.total, //解析数据长度
            "data": res.data.data //解析数据列表
            }},
            page: false,
            cols: cols1,
            skin: 'line',
            toolbar: [],
            defaultToolbar: []
        });
        let xAxisData = {:json_encode($total['date'])};
        let data1 = {:json_encode($total['pv'])};
        let data2 = {:json_encode($total['uv'])};
        let data3 = {:json_encode($total['sum'])};
        let echartsRecords1 = echarts.init(document.getElementById('echarts-records1'), 'walden');
        let emphasisStyle = {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0,0,0,0.3)'
              }
        };
        let option = {
              legend: {
                data: ['PV', 'UV','重复数'],
                left: '10%'
              },
              brush: {toolbox: ['clear'],
                xAxisIndex: 0
              },
              toolbox: {
                feature: {
                  magicType: {
                    type: ['stack']
                  },
                  dataView: {}
                }
              },
              tooltip: {},
              xAxis: {
                data: xAxisData,
                name: '日期',
                axisLine: { onZero: true },
                splitLine: { show: false },
                splitArea: { show: false }
              },
              yAxis: {},
              grid: {
                bottom: 100
              },
              series: [
                {
                  name: 'PV',
                  type: 'line',
                  data: data1
                },
                {
                  name: 'UV',
                  type: 'line',
                  data: data2
                },
                {
                  name: '重复数',
                  type: 'line',
                  data: data3
                },
                
              ]
            };
		echartsRecords1.setOption(option);
        form.on('submit(table-query)', function (data) {
            $.ajax({
                url: '{:url("dashed")}',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function(result) {
                    if (result.code == '1') {
                        option.xAxis.data = result.data.date;
                        option.series[0].data = result.data.pv;
                        option.series[1].data = result.data.uv;
                        option.series[2].data = result.data.sum;
                        echartsRecords1.setOption(option);
                    } 
                }
            })
            table.reload('table-list', {
                where: data.field
            })
            return false;
        });
        form.on('submit(table-del)', function (data) {
            $.ajax({
                url: '{:url("del")}',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function(result) {
                    if (result.code == '1') {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            })
            return false;
        });
        window.onresize = function() {
            echartsRecords1.resize();
        }
    })

</script>
{/block}